<template>
  <div class="content">
    <el-form :inline="true" :model="queryForm" class="form-inline">
      <el-form-item label="单词">
        <el-input v-model="queryForm.word" placeholder="请输入单词" clearable />
      </el-form-item>

      <el-form-item label="书籍">
        <el-select v-model="queryForm.bookId" placeholder="请选择" clearable >
          <el-option v-for="item in bookList" :key="item.id" :label="item.bookName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="单元">
        <el-select v-model="queryForm.num" placeholder="请选择" clearable >
          <el-option v-for="item in unitList" :key="item.id" :label="item.num" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadWordList">查询</el-button>
      </el-form-item>
    </el-form>

    <div style="margin-bottom:10px;">
      <el-button type="primary" @click="handleSaveWord(null)">添加单词</el-button>
    </div>

    <el-table :data="wordList" stripe>
      <el-table-column prop="bookName" label="书籍名称" />

       <el-table-column label="单元号">  
  <template #default="scope">  
    <span>unit{{ scope.row.num }}</span>  
  </template>  
</el-table-column>

<el-table-column prop="word" label="单词" />

<el-table-column prop="chinese" label="翻译" />



      <el-table-column label="图片">
        <template #default="scope">
          <el-image style="height: 23px; border: none; cursor: pointer;vertical-align: top"
              :src="scope.row.photo"
          />
        </template>
      </el-table-column>

      <el-table-column label="声音">  
  <template #default="scope">  
    <el-button size="small" @click="playSound(scope.row)">播放声音</el-button>  
  </template>  
</el-table-column>
      

      

      <el-table-column label="操作" >
        <template #default="scope">
          <el-button size="small" style="margin-left: 2px;" @click="handleSaveWord(scope.row.id)">编辑</el-button>
          <el-button size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          

        </template>
      </el-table-column>

    </el-table>

    <div style="margin-top: 10px;">
      <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script setup>  
import { reactive, ref } from "vue";  
import { useRouter } from "vue-router";  
import { getWordList , deleteWordById} from "@/api/word";  
import { getBookList } from "@/api/book"; 
import { getUnitList } from "@/api/unit"; 
import { ElMessage, ElMessageBox } from 'element-plus';  
  
const router = useRouter();  
  
const queryForm = reactive({  
  bookId: null,  
  num: null, 
  word:null, 
  page: 1,  
  pageSize: 10  
});  
  
let wordList = reactive([]);  
let bookList = reactive([]);  
let unitList = reactive([]);   

let total = ref(0);  
  
// 加载全部书本  
getBookList().then(resp => {  
  bookList.push(...resp.data);  
});  

// 加载全部单元  
getUnitList().then(resp => {  
  unitList.push(...resp.data);  
});  
  
let handleSaveWord = (wordId) => {  
  if (wordId) {  
    // 编辑  
    router.push({ path: '/word/save', query: { wordId: wordId } });  
  } else {  
    // 添加  
    router.push({ path: '/word/save' });  
  }  
}  
 
let handleDelete = (bookId) => {  
  // 确认对话框  
  ElMessageBox.confirm(  
    "是否删除?",  
    '提示',  
    {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning',  
    }  
  ).then(() => {  
    // 发送请求  
    deleteWordById(bookId).then(resp => {  
      loadWordList();  
    });  
  }).catch(() => {  
  });  
}  

const playSound = (row) => {  
  if (row.voice) {  
    // 创建一个新的 Audio 对象  
    const audio = new Audio(row.voice);  
    // 播放声音  
    audio.play()  
      .then(() => {  
        console.log('声音播放成功');  
      })  
      .catch(error => {  
        console.error('声音播放失败:', error);  
      });  
  } else {  
    console.log('没有找到声音文件的URL');  
  }  
}  
  
// 定义方法  
let loadWordList = () => {  
  // 准备数据  
  getWordList(queryForm).then(resp => {  
    if (resp && resp.msg === '成功') { // 假设成功时 msg 为 '成功'  
      console.log(queryForm); // 保留此日志输出  
      wordList.length = 0; // 清空当前列表  
      wordList.push(...resp.data); // 添加新数据  
      total.value = resp.total; // 更新总数  
    } else {  
      // 如果不是'成功'或者resp不满足条件（例如为null或undefined），则显示错误信息  
      ElMessage.error(resp && resp.msg ? resp.msg : '加载词汇列表失败：未知错误');  
      wordList.length = 0; // 清空列表  
      total.value = 0; // 重置总数  
    }  
  }).catch(error => {  
    // 处理请求错误  
    ElMessage.error('加载词汇列表失败');  
    console.error('加载词汇列表出错:', error);  
    wordList.length = 0; // 清空列表  
    total.value = 0; // 重置总数  
  });  
};
  
let handleSizeChange = (pageSize) => {  
  queryForm.pageSize = pageSize;  
  loadWordList();  
}  
  
let handlePageChange = (page) => {  
  queryForm.page = page;  
  loadWordList();  
}  
  
loadWordList();  
</script>

<style scoped>
</style>

<style>
.form-inline .el-select {
  --el-select-width: 220px;
}
</style>
